<template>
  <n-modal v-model:show="loginModalVisible" @after-leave="clearForm">
    <n-card
        style="width: 600px"
        title="登录"
        :bordered="false"
        size="huge"
        role="dialog"
        aria-modal="true"
    >
      <template #header-extra>
        <n-icon size="18" @click="loginModalVisible=false" style="cursor: pointer">
          <Close/>
        </n-icon>
      </template>
      <div class="login_form">
        <n-form ref="formRef" :model="modelRef" :rules="rules">

          <n-form-item path="account" label="请输入手机号">
            <n-input v-model:value="modelRef.account" placeholder="请输入手机号"
                     @keydown.enter.prevent/>
          </n-form-item>

          <n-form-item path="password" label="密码">
            <n-input
                v-model:value="modelRef.password"
                type="password"
                placeholder="请输入密码"
                @keydown.enter.prevent
            />
          </n-form-item>
          <n-row :gutter="[0, 24]">
            <n-col :span="24">
              <div style="display: flex; justify-content: center">
                <n-button
                    :disabled="modelRef.age === null"
                    round
                    type="primary"
                    @click="handleValidateButtonClick"
                >
                  登录
                </n-button>
              </div>
            </n-col>
          </n-row>
        </n-form>
      </div>

    </n-card>
  </n-modal>
</template>

<script setup>
import {Close} from '@vicons/ionicons5'
import {requestGetUserInfo, requestLogin} from "../api/user/UserApi";
import encrypt from "../common/util/md5";

const loginModalVisible = ref(false)

function validatePasswordStartWith(rule, value) {
  return !!modelRef.value.password && modelRef.value.password.startsWith(value)
      && modelRef.value.password.length >= value.length;
}

function validatePasswordSame(rule, value) {
  return value === modelRef.value.password;
}

const rules = {
  account: [
    {
      required: true,
      message: "请输入用户名"
    }
  ],
  password: [
    {
      required: true,
      message: "请输入密码"
    }
  ],
};
/**
 * 登录弹框
 * @type {*}
 */
const modelRef = ref({
  account: null,
  password: null,
});

const formRef = ref(null);

const message = window.$message;
let emits = defineEmits(['loginSuccess']);


const handleValidateButtonClick = (e) => {
  e.preventDefault();
  formRef.value?.validate((errors) => {
    if (!errors) {
      // message.success("验证成功");
      requestLogin({
        account: modelRef.value.account,
        password: encrypt(modelRef.value.password)
      }).then(res => {
        // console.log("res",res)
        window.localStorage.setItem("token", res.data);
        requestGetUserInfo().then(userRes => {
          window.localStorage.setItem("info", JSON.stringify(userRes));
          loginModalVisible.value = false
          emits('loginSuccess')
        })
      })
    } else {
      console.log(errors);
      // message.error("验证失败");
    }
  });
}

const open = () => {
  loginModalVisible.value = true
}

/**
 * 关闭弹框
 */
const close = () => {
  loginModalVisible.value = false
}

/**
 * 清空表单
 */
const clearForm = () => {
  modelRef.value = {}
}
defineExpose({open, close})


</script>

<style scoped>

</style>
